<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改用户</title>
<link rel="stylesheet" type="text/css" href="admin/css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="admin/css/niceforms-default.css" />
<script type="text/javascript" src="admin/js/jquery.min.js"></script>
<script type="text/javascript" src="admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="admin/js/jquery.metadata.js"></script>
<script type="text/javascript" src="admin/js/niceforms.js"></script>
<script type="text/javascript" src="admin/js/ddaccordion.js"></script>
<script type="text/javascript" src="admin/js/jconfirmaction.jquery.js"></script>
<script type="text/javascript" src="admin/js/jquery.jclock-1.2.0.js"></script>

<script type="text/javascript">
ddaccordion.init({
	headerclass: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [1], //index of content(s) open by default [index1, index2, etc] [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["suffix", "<img src='<%=basePath%>admin/images/plus.gif' class='statusicon' />", "<img src='<%=basePath%>admin/images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
});
</script>
<script type="text/javascript">
<%--$(document).ready(function() {--%>
<%--	$('.ask').jConfirmAction();--%>
<%--});--%>

$(function() {
    $('.jclock').jclock();
});
</script>
<script>
<%--	$(function() {--%>
<%--		$('#userForm').validate({--%>
<%--			rules: {--%>
<%--				account: {required:true, minlength:2},--%>
<%--				username: {required:true, minlength:2},--%>
<%--				mobile: {required:true, digits:true, minlength:11}--%>
<%--			},--%>
<%--			messages: {--%>
<%--				account: {required: "<font color='red'>请输入账户名</font>", minlength: jQuery.format("账户名不能小于2个字符")},--%>
<%--				username: {required: "<font color='red'>请输入用户姓名</font>", minlength: jQuery.format("用户姓名不能小于2个字符")},--%>
<%--				mobile: {required: "<font color='red'>请输入手机号码</font>", digits: jQuery.format("手机号码必须为11个数字"), minlength: jQuery.format("手机号码必须为11个数字")} --%>
<%--			}--%>
<%--		});--%>
<%--	});--%>
	
	$(function() {
		var objSelect = document.getElementById('selec');
		<s:iterator value="user.roles" status="status">
			var item = new Option( "<s:property value='name' />", "<s:property value='roleId' />");
			objSelect.options.add(item);
		</s:iterator>
	});

	function check(v) {
		for (len = userForm.selec.length - 1; len >= 1; len--) {
			if (userForm.selec.options[len].text == v) {
				return false;
			}
		}
		return true;
	}
	
	function add(){
	    var i = 0;
		while(userForm.role.selectedIndex!=-1){ 
			var j=userForm.role.selectedIndex;
			if(check(userForm.role.options[j].text)) {
				userForm.selec.add(new Option(userForm.role.options[j].text, userForm.role.options[j].value)); 
			} else {
				alert("你已经添加了此角色,不能重复添加！");
			}
			userForm.role.options[j].selected=false; 
			i++;
		}
		if (i<1) {
			alert("请在左边列表中选中您要添加的角色!");
		}
	}
	
	function del(){
		var i = 0;
		while(userForm.selec.selectedIndex!=-1){ 
			var j=userForm.selec.selectedIndex; 
			if(j!=0){
				userForm.selec.options[j] = null;
				i++;
			} else {
				userForm.selec.options[j].selected=false;
			}
		} 
	    if (i<1) {
	    	alert("请在右边列表中选中您要删除的角色!");
	    }
	}
	
	function addUser() {
		
		if(userForm.account.value == '') {
			alert("请输入帐户名!");
			userForm.account.focus();
			return;
		}
		if(userForm.username.value == '') {
			alert("请输入用户名称!");
			userForm.username.focus();
			return;
		}
		var mobile = userForm.mobile.value;
		if (mobile != '') {
			var format=/^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
			if(!format.test(mobile)) {
				alert('提示\n\n请输入有效的中国大陆手机号码!');
				userForm.mobile.focus();
				return;
			}
		} else {
			alert("请输入有效的手机号码!");
			userForm.mobile.focus();
			return;
		}
		
		if(userForm.selec.length <= 1){
			alert("请选择角色类型!");
			return;
		}
		for(l=userForm.selec.length-1;l>=1;l--){
			userForm.selec.options[l].selected=true;
		}
		userForm.selec.options[0].selected=false;
		
		document.userForm.submit();
	}

</script>
</head>

<body>
<div id="main_container">
       <%@include file="../header.jsp"%>
    <div class="main_content">
          <%@include file="menu.jsp"%>
   		 <div class="center_content">  
  		  <div class="left_content">
  				   <%@include file="sidebarmenu_sys.jsp"%>
    	  </div>  
    
		    <div class="right_content">            
		        
		    	<h5>当前位置: 系统管理 &gt; 安全管理 &gt; 用户管理 &gt; 修改用户</h5>  
		  
		  		<form action="user!editUser" id="userForm" name="userForm" method="post">
				<table id="rounded-corner" summary="2007 Major IT Companies' Profit">
				    <thead>
				    	<tr>
				        	<th scope="col" class="rounded-company" width="20%"></th>
				            <th scope="col"  colspan="3" style="text-align: center;">填写用户基本信息</th>
				            <th scope="col" class="rounded-q4" width="20%"></th>
				        </tr>
				    </thead>
			        <tfoot>
			    		<tr>
			    			<td  class="rounded-foot-left"></td>
				        	<td colspan="3">
				        		<span class="error"><s:fielderror fieldName="error"></s:fielderror></span>
				        	</td>
				        	<td class="rounded-foot-right">&nbsp;</td>
				        </tr>
				    </tfoot>
				    <tbody style="text-align: center;">
				    	<tr>
				        	<td></td>
				            <td align="right" width="20%">账  号 ：</td>
				            <td align="left" colspan="2" width="40%">
				            	<input type="hidden" name="user.account" value="${user.account}" />
				            	<input type="text" name="" id="account" value="${user.account}" maxlength="12" disabled="disabled" /> <font color="red">*</font>
				            </td>
				            <td></td>
				        </tr>   
				        <tr>
				        	<td></td>
				            <td align="right">用户姓名 ：</td>
				            <td align="left" colspan="2"><input type="text" name="user.username" id="username" value="${user.username}" maxlength="20" /> <font color="red">*</font></td>
				            <td></td>
				        </tr> 
				        <tr>
				        	<td></td>
				            <td align="right">手机号码：</td>
				            <td align="left" colspan="2"><input type="text" name="user.mobile" id="mobile" value="${user.mobile}" maxlength="11" /> <font color="red">*</font></td>
				            <td></td>
				        </tr>  
				        <tr>
				        	<td></td>
				            <td align="right">备  注：</td>
				            <td align="left" colspan="2"><input type="text" name="user.remarks" id="remarks" value="${user.remarks}" maxlength="50" /></td>
				            <td></td>
				        </tr>
				        <tr>
				        	<td colspan="5" class="myMenu">配置角色</td>
				        </tr> 
				        <tr>
				        	<td></td>
				        	<td>待选多选框</td>
				        	<td></td>
				        	<td>选取多选框</td>
				        	<td></td>
				        </tr> 
				        <tr>
				        	<td width="20%"></td>
							<td rowspan="2" align="center" valign="top" width="15%">
								<select id="role" name="" size="7" multiple="multiple" style="width:100px; font-size:11px;">
									<s:iterator value="roles" status="status">
										<option value="<s:property value="roleId"/>">
											<s:property value="name"/>
										</option>
									</s:iterator>
								</select>
							</td >
							<td align="center" valign="middle" height="10px" width="22%">
								<a href="javascript:add();"> &gt;&gt; 选取  </a>
							</td>
							<td rowspan="2" align="center" width="22%">
								<select id="selec" name="roleIds" size="7" multiple="multiple" style="width:100px; font-size:11px;">
									<option>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;----------
									</option>
								</select>
							</td>
							<td width="20%"></td>
						</tr>
				        <tr>
				        	<td></td>
							<td align="center" valign="middle">
								<a href="javascript:del();">&lt;&lt; 撤销  </a>
							</td>
							<td></td>
						</tr>
				        <tr>
				        	<td colspan="2"></td>
				            <td>
				            	<a href="javascript:addUser();" class="bt_blue">
		         					<span class="bt_blue_lft"></span><strong>确定</strong><span class="bt_blue_r"></span>
		         					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		        				</a>
				            </td>
				            <td  colspan="2" ></td>
				        </tr>  
				    </tbody>
				</table>
				</form>
		     
			</div>  <!-- end of right content-->
                    
		</div>  <!--end of center content -->               
    
		<div class="clear"></div>
	
    </div>  <!--end of main content-->
	
	
    <%@include file="../footer.jsp" %>

</div>		
</body>
</html>